<include file="common/hearder"/>
<script src="__PUBLIC__/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<div class="page-header">
    <div class="pull-left"><span class="glyphicon glyphicon-tag">审批类型管理</span> / <small>Table</small></div>
</div>
<div class="pull-right">
    <form action="{:U('index')}" method="post">
        <input type="text" name="tj" placeholder="输入’类型‘查询">
        <button type="submit" class="btn btn-mystyle btn-sm"><span class="glyphicon glyphicon-search"></span>搜索</button>
    </form>
</div>

<div class="clearfix"></div>
<div class="table-margin" style="width: 300px">
    <form  method="post" id="form_all">
        <table id="aList" class="table table-bordered table-header">
            <thead>
            <tr>
                <td class="w10">角色</td>
                <td class="w15">操作</td>
            </tr>
            </thead>
            <tbody>
            <foreach name="list" item="v">
                <tr class="li" data-name="{$postinfoNameList[$v['rid']]}">
                    <td><input type="hidden" name="atrids[]" value="{$v.pt_id}">{$postinfoNameList[$v['pt_id']]}</td>
                    <td>
                        <div class="btn-toolbar">
                            <div class="btn-group btn-group-xs" >
                                <button type="button" class="btn btn-default btn-xs text-secondary asRoleUp"><span class="icon-pencil-square-o"></span> 向上 </button>
                                <button type="button" class="btn btn-default btn-xs text-secondary asRoleDown"><span class="icon-pencil-square-o"></span> 向下 </button>
                                <button type="button" class="btn btn-default btn-xs text-danger am-hide-sm-only asRoleDel"><span class="icon-trash-o"></span> 移除</button>
                            </div>
                        </div>
                    </td>
                </tr>


                <!--<tr>-->
                    <!--<td><input name="id[]" value="{$v.artid}" type="checkbox" class="ch_id">{$postinfoNameList[$v['artid']]}</td>-->
                    <!--<td>{$v.atrid}</td>-->
                    <!--<td>{$v.atrname}</td>-->

                <!--</tr>-->
            </foreach>
            </tbody>
        </table>
        <input type="hidden" value="1" name="hidden">
        <input type="hidden" name="atrid" value="{$_GET['atrid']}">
        <input type="submit" value="确定">
    </form>
        <div class="am-u-sm-4">
            <ul class="ul" id="asRoleList">
                <foreach name="postinfoList" item="rl" >
                    <if condition="empty($postinfoSetList[$rl['pt_id']])"> <!--只要没被流程设置表启用的角色-->
                        <div class="li"><li>{$rl.pt_name} <button type="button" data-name="{$rl.pt_name}" data-rid="{$rl.pt_id}" class="btn btn-success btn-sm asRoleAdd">插入</button></li></div>
                    </if>
                </foreach>
            </ul>
        </div>
    {$show}
</div>
<script>
    $('body').on('click','.asRoleAdd',function () {
        var name = $(this).data('name');
        var atrid = $(this).data('rid');
        $('#aList tbody').append('<tr data-name="'+name+'"><td><input type="hidden" name="atrids[]" value="'+atrid+'">'+name+'</td><td><div class="btn-toolbar">\n' +
            '    <div class="btn-group btn-group-xs">\n' +
            '        <button type="button" class="btn btn-default btn-xs am-text-secondary asRoleUp"><span class="icon-pencil-square-o"></span> 向上 </button>\n' +
            '        <button type="button" class="btn btn-default btn-xs am-text-secondary asRoleDown"><span class="icon-pencil-square-o"></span> 向下 </button>\n' +
            '        <button type="button" class="btn btn-default btn-xs am-text-danger am-hide-sm-only asRoleDel"><span class="icon-trash-o"></span> 移除</button>\n' +
            '    </div>\n' +
            '</div></td></tr>');
        $(this).parents('.li').remove();
    });
    $('body').on('click','.asRoleDel',function () {
        var name = $(this).parents('tr').data('name');
        console.log(name);
        $('#asRoleList').append('<div class="li"><li>'+name+'<button type="button" data-name="'+name+'"  class="btn btn-success btn-sm asRoleAdd">插入</button></li></div>\n');
        $(this).parents('tr').remove();
        return false;
    });
    $('body').on('click','.asRoleUp',function () {
        var trObj = $(this).parents('tr').prev('tr');
        if (trObj.length >0){
            trObj.before($(this).parents('tr').prop("outerHTML"));
            $(this).parents('tr').remove();
        }
    });
    $('body').on('click','.asRoleDown',function () {
        var trObj = $(this).parents('tr').next('tr');
        if (trObj.length >0){
            trObj.after($(this).parents('tr').prop("outerHTML"));
            $(this).parents('tr').remove();
        }
    });
</script>
<style>
    .ul{
        border: 0px solid red;
        width: 400px;
        height: 300px;
        margin-left: 500px;
        margin-top: -80px;
    }
    .li{
        border:0px solid red;
        width: 100%;
        height: 30px;
        margin-top: 3px;
    }
</style>
<include file="common/footer"/>
